<template>
    <div id="quan">
        <div id="bigst" ref="f1" @scroll="scroll1" @click="sco">
            <img :src="tupian[0].img" alt="" id="q1">
            <div><span></span></div>
            <div id="dao">
                <img :src="tupian[1].img" alt="" id="q2">
                <div>
                    <router-link to="/user/search" class="fa fa-search"></router-link>
                    <router-link :to="islogin?'/user/shopping':'/user/login'" class="fa fa-comment-o"></router-link>
                    <span class="fa fa-ellipsis-h" @touchstart="qiaoqiao"></span>
                </div>
            </div>
            <div id="shangchuan" :style="obj">
                <router-link to="/user/shangchuan"><span class="fa fa-chain"></span><span>上传商品</span></router-link>
                <div id="smallbox" v-if="isshow"></div>
            </div>
            <Cc id="qwe"></Cc>
            <Swiper :list="lunkuo" auto loop id="swe"></Swiper>
            <div id="fen">
                <div v-for="l in lei" id="qq" @click="sco">
                    <span @click="ctx(l)">
                    <img :src="l.img" alt="">
                    <p>{{l.txt}}</p>
                </span>
                </div>
            </div>
            <div id="jx">━━━ 精选推荐 ━━━</div>
            <img :src="tupian[2].img" alt="" id="q3">
            <img :src="tupian[3].img" alt="" id="q4">
            <div id="qx">
                <p>━━━ 热卖品牌 ━━━</p>
                <p>聚焦全球高端品牌</p>
            </div>
            <div id="liuliu">
                <div id="ad">
                    <img :src="l.img" alt="" v-for="l in liu">
                </div>
            </div>
            <div id="qw">
                <p>━━ 人气热卖单品 ━━</p>
            </div>
            <div id="gum">
                <div class="renqi">
                    ------------------------------------------------------------------------
                    <div v-for="m in data2" class="dis">
                        <router-link :to="'/user/find/gooddetail/'+m._id" class="box">
                            <div>
                                <div>
                                    <img :src="'/avatar/'+m.pics[0]">
                                </div>
                                <div id="nei">
                                    <p>{{m.name}}</p>
                                    <p>私人订制，你值得拥有</p>
                                    <p>￥{{m.price}}</p>
                                </div>
                            </div>
                        </router-link>
                    </div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>

                </div>
                <div @click.capture="btn" id="jia" v-if="isxian">点击加载更多</div>
            </div>

            <br>
            <div id="time">
                <span>距离下一场红包雨</span>
                <Time></Time>
            </div>
            <div id="daoshu" v-if="!isxian">别拉了，已经到底了</div>
            <div id="zuihou">
                <p><a>电脑板</a>|<a>登录</a>|<a>注册</a>|<a>购物车</a></p>
                <p>©2017 mianshui365.com 版权所有</p>
            </div>
            <div @click="returntop" id="huiqu" style="opacity:0"><span class="fa fa-arrow-up"></span></div>
        </div>
        <div id="huise" v-if="show"></div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex';
    import { Swiper } from 'vux';
    import Cc from '../components/Cc.vue'
    import Time from '../components/Time.vue'
    export default {
        data: function () {
            return {
                islogin: false,
                isshow: false,
                obj: {
                    "height": "0"
                },
                data1: [],
                isxian: true,
                ispp: false

            }
        },
        components: {
            Swiper,
            Cc,
            Time
        },
        mounted: function () {
            // console.log(this.scroll)

            setTimeout(function () {
                // console.log(this.scroll);
                this.$refs.f1.scrollTop = this.scroll;
                this.$store.dispatch("requestTScroll", this.$refs.f1.scrollTop)
                if (this.$refs.f1.scrollTop > 300) {
                    this.ispp = true;
                } else {
                    this.ispp = false;
                }
            }.bind(this), 500);
            this.$store.dispatch("requestTupian"),
                this.$store.dispatch("requestLunkuo"),
                this.$store.dispatch("requestLei"),
                this.$store.dispatch("requestLiu"),
                this.$store.dispatch("requestIslogin")
                    .then(res => {
                        if (res.data) {
                            this.islogin = true;
                        } else {
                            this.islogin = false;
                        }
                    });
            var page = this.data1.length / 6;
            var params = {
                page: page
            }
            this.$store.dispatch("requestSuoyou", params)
                .then(res => {
                    this.data1 = res.data.data1;
                    this.$store.dispatch("requestCunchu", this.data1)
                });
        },
        computed: {
            ...mapState([
                "tupian",
                "lunkuo",
                "lei",
                "liu",
                "data2",
                "scroll",
                "show"
            ])
        },
        methods: {
            sco: function () {
                if (this.$refs.f1.scrollTop < 400) {
                    this.$store.dispatch("requestTScroll", 0)
                } else {
                    // console.log(this.$refs.f1.scrollTop+1);
                    this.$store.dispatch("requestTScroll", this.$refs.f1.scrollTop)
                }

            },
            scroll1: function () {
                // console.log(this.$refs.f1.scrollTop)
                //动态回到顶部
                var qwe = document.getElementById("qwe");
                var huiqu = document.getElementById("huiqu");
                //动态fixed
                if (this.$refs.f1.scrollTop >= 100) {
                    qwe.style.position = "fixed";
                    qwe.style.top = 0;
                } else {
                    qwe.style.position = "static";
                }
                if (this.$refs.f1.scrollTop >= 500) {
                    huiqu.style.opacity = 1;
                } else {
                    huiqu.style.opacity = 0;
                }
            },
            ctx: function (l) {
                // console.dir(l)
                if (this.islogin) {
                    location.href = "#" + l.lianlie2;
                } else {
                    location.href = "#" + l.lianlie1;
                }
            },
            qiaoqiao: function () {
                if (this.isshow) {
                    this.obj.height = "0"
                } else {
                    this.obj.height = "9.6vh"
                }
                this.isshow = !this.isshow;
            },
            btn: function (e) {
                // console.log(e.target.scrollTop)
                var page = this.data1.length / 6;
                var params = {
                    page: page
                }
                this.$store.dispatch("requestSuoyou", params)
                    .then(res => {
                        if (res.data.data1.length < 6) {
                            this.isxian = false;
                        } else {
                            this.isxian = true;
                        }
                        for (var i = 0; i < res.data.data1.length; i++) {
                            this.data1.push(res.data.data1[i]);
                            // console.dir(this.data1)
                        }
                        this.$store.dispatch("requestCunchu", this.data1)
                    });
            },
            returntop: function () {

                //  this.$refs.f1.scrollTop = 0;
                var pp = setInterval(() => {
                    this.$refs.f1.scrollTop -= 20;
                    if (this.$refs.f1.scrollTop < 20) {
                        this.$refs.f1.scrollTop = 0;
                        clearInterval(pp);
                    }
                }, 10)
                // document.documentElement.scrollTop = document.body.scrollTop = 0;
            },

        },
        watch: {
            show: function () {
                if (this.show) {
                    console.log(12345)
                    var yemian = document.getElementById("quan");
                    var wh = yemian.clientHeight;
                    var ww = yemian.clientWidth;
                    function createFlake() {
                        var f = document.createElement("img");
                        var huise = document.getElementById("huise");
                        f.src = "/static/33.png";
                        huise.appendChild(f);
                        var n = Math.random();//0-1
                        n = n * 40 + 10;//10-50
                        n = Math.floor(n);
                        f.style.width = 2*n + "px";
                        f.style.height = 2*n + "px";
                        f.style.position = "absolute";
                        var l = Math.random() * (ww - n);
                        l = Math.floor(l);
                        f.style.left = l + "px";
                        var h = Math.random() * (wh - n);
                        h = Math.floor(h);
                        f.style.top = h + "px";
                        function move() {
                            l = l + 1;
                            h += 2;
                            if (l > ww) {
                                l = 0 - n;
                            }
                            if (h > wh) {
                                h = 0 - n;
                            }
                            f.style.left = l + "px";
                            f.style.top = h + "px";
                        }
                        setInterval(move, 200);
                    }
                    var ss = 10;
                    var xia = setInterval(() => {
                        createFlake();
                        ss--;
                        console.log(ss)
                        if (ss < 0) {
                            console.log(123)
                            var data = {
                                show: false
                            }
                            this.$store.dispatch("requestHongbao", data)
                            clearInterval(xia);
                        }
                    }, 1000)
                }

            }
        }
    }

</script>

<style scoped>
    #bigst {
        height: 100vh;
        overflow-y: scroll;
        position: relative;
    }

    #huiqu {
        position: fixed;
        bottom: 60px;
        right: 20px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 15px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    #huiqu span {
        color: white;
    }

    #gum {
        position: relative;
        /*margin-bottom: 20px;*/
    }

    #jia {
        /*border: 1px solid black;*/
        position: absolute;
        bottom: -20px;
        margin-left: 35vw;
        font-size: 14px;
        color: red;
        cursor: pointer;
        /*background-color: black;*/
    }

    .fix {
        position: fixed;
    }

    #quan {
        background-color: #eee;
        /*position: relative;*/
    }

    #q1 {
        width: 100vw;
        height: 9.6vh;
    }

    #q2 {
        width: 33vw;
        height: 4.5vh;
        margin: auto 0;
    }

    #q3 {
        width: 100vw;
        height: 24vh;
    }

    #q4 {
        width: 100vw;
        padding-top: 10px;
    }

    #dao {
        margin-top: -4px;
        width: 100vw;
        height: 7.5vh;
        display: flex;
        justify-content: space-between;
        font-family: "Microsoft YaHei";
        font-size: 30px;
        font-weight: 100;
        padding: 0 6vw;
        line-height: 7.5vh;
        background-color: white;
        color: #FF5B28;
    }

    #ad {
        display: inline;
    }

    #ad img {
        width: 30vw;
        height: 30vw;
    }

    #dao a {
        margin: 0 5px;
        color: #FF5B28;
    }

    #qq {
        width: 25vw;
        height: 25vw;
        padding-top: 14px;
        text-align: center;
    }

    #qq span {
        cursor: pointer;
    }

    #qq img {
        width: 12.5vw;
        height: 12.5vw;
    }

    #qq p {
        margin: 0;
        font-size: 12px;
        color: #666;
    }

    #fen {
        display: flex;
        flex-wrap: wrap;
        padding-top: 15px;
        background-color: white;
    }

    #jx {
        text-align: center;
        padding: 15px 0px 10px 0px;
        font-size: 14px;
        color: #FF5B28;
    }

    #qx {
        width: 100vw;
        height: 10vh;
        text-align: center;
    }

    #qx p {
        margin: 0;
    }

    #qx p:nth-of-type(1) {
        font-size: 14px;
        color: #FF5B28;
    }

    #qx p:nth-of-type(2) {
        font-size: 12px;
        color: #aaa;
    }

    #shangchuan {
        width: 100vw;
        height: 9.6vh;
        background-color: black;
        text-align: center;
        transition: all 0.7s;
        overflow: hidden;
    }
    /*#shangchuan .a{
        height: 0 !important;
        overflow: hidden;
    }*/

    #shangchuan a span {
        display: block;
        font-size: 12px;
        color: whitesmoke;
    }

    #shangchuan a span:nth-of-type(1) {
        padding-top: 5px;
        font-size: 25px;
    }

    #liuliu {
        width: 100vw;
        height: 46vh;
        background-color: white;
        padding: 10px;
    }

    #ad img {
        margin-left: 4px;
    }

    #time {
        display: flex;
        position: absolute;
        top: 0;
        right: 5px;
    }

    #time span {
        padding-top: 5px;
        font-size: 11px;
        color: rgb(252, 229, 185);
    }

    #smallbox {
        position: absolute;
        top: 21.5vw;
        right: 20px;
        width: 15px;
        height: 15px;
        border-left: solid 7.5px white;
        border-top: solid 7.5px white;
        border-right: solid 7.5px white;
        border-bottom: solid 7.5px black;
        /*background-color: black;*/
    }

    #swe {
        z-index: 0 !important;
    }

    #qwe {
        z-index: 10;
    }

    #daoshu {
        text-align: center;
        font-size: 12px;
        color: #aaa;
    }

    #zuihou p {
        text-align: center;
        font-size: 12px;
        margin: 0;
        padding: 10px 0;
    }

    #zuihou p:nth-of-type(2) {
        color: #aaa;
    }

    #zuihou p a {
        margin: 0 20px;
    }

    #qw {
        text-align: center;
        font-size: 14px;
        color: #FF5B28;
    }


    .renqi {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .mose {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .dis {
        width: 46vw;
        /*border: solid 1px black;*/
        text-align: center;
        background-color: white;
        margin: 5px 0;
        padding: 5px 0;
    }

    .box {
        width: 46vw;
    }

    .box img {
        width: 46vw;
        height: 46vw;
    }

    #nei p {
        margin: 0;
        text-align: left;
        margin-left: 10px;
    }

    #nei p:nth-of-type(1) {
        color: black;
        font-size: 14px;
        font-weight: 900;
    }

    #nei p:nth-of-type(2) {
        color: black;
        font-size: 14px;
    }

    #nei p:nth-of-type(3) {
        color: red;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
    }

    #huise {
        display: inline;
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }
</style>